<template>
  <div>
    <DynamicTable
      size="small"
      bordered
      :data-request="loadData"
      :columns="columns"
      row-key="id"
      @resize-column="handleResizeColumn"
      :showTableSetting="false"
    >
      <template #toolbar>
        <a-button type="primary"> 新增 </a-button>
        <a-button type="primary"> 删除 </a-button>
      </template>
    </DynamicTable>
  </div>
</template>
<script setup lang="ts">
  import { columns } from './columns';
  import { getTableListApi } from '@/api/test/index';
  import { useTable, type OnChangeCallbackParams } from '@/components/core/dynamic-table';

  const [DynamicTable, dynamicTableInstance] = useTable();

  const loadData = async (
    params,
    onChangeParams: OnChangeCallbackParams,
  ): Promise<API.TableListResult> => {
    const data = await getTableListApi();
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };

  // defineOptions({
  //   name: 'TestTable',
  // });
  const handleResizeColumn = (w, col) => {
    // console.log('w', w, col);
    col.width = w;
  };
</script>
<style scoped lang="less"></style>
